<template>
  <a-table :columns="columns" :pagination="pagination" :dataSource="data" @change="onChange"/>
</template>
<script>
  //用于选择
  const columns = [
    {
    title: 'Key',
    dataIndex: 'key',
    // specify the condition of filtering result
    // here is that finding the name started with `value`
    //排名顺序等于成绩排名顺序
    sorter: (a, b) => a.score - b.score
  },
    {
      title: '昵称',
      dataIndex: 'name',
      filters: [
        {
          text: 'Joe',
          value: 'Joe'
        },
        {
          text: 'Jim',
          value: 'Jim'
        },
        {
          text: 'Submenu',
          value: 'Submenu',
          children: [
            {
              text: 'Green',
              value: 'Green'
            },
            {
              text: 'Black',
              value: 'Black'
            }
          ]
        }
      ],
      // specify the condition of filtering result
      // here is that finding the name started with `value`
      onFilter: (value, record) => record.name.indexOf(value) === 0,
      sorter: (a, b) => a.name.length - b.name.length
    }, {
      title: '地址',
      dataIndex: 'address',
      filters: [{
        text: 'London',
        value: 'London'
      }, {
        text: 'New York',
        value: 'New York'
      }],
      filterMultiple: false,
      onFilter: (value, record) => record.address.indexOf(value) === 0,
      sorter: (a, b) => a.address.length - b.address.length
    }, {
      title: '成绩',
      dataIndex: 'score',
      sorter: (a, b) => a.score - b.score
    }]

  const data = [
    {
      key: 'No.1',
      name: 'John Brown',
      address: 'New York No. 1 Lake Park',
      score: 53
    }, {
      key: 'No.2',
      name: 'Jim Green',
      address: 'London No. 1 Lake Park',
      score: 51
    }, {
      key: 'No.3',
      name: 'Joe Black',
      address: 'Sidney No. 1 Lake Park',
      score: 32
    }, {
      key: 'No.4',
      name: 'Jim Red',
      address: 'London No. 2 Lake Park',
      score: 23
    }, {
      key: 'No.5',
      name: 'Jim Red',
      address: 'London No. 2 Lake Park',
      score: 16
    }, {
      key: 'No.6',
      name: 'Jim Red',
      address: 'London No. 2 Lake Park',
      score: 15
    }]

  const pagination={
    defaultPageSize:5
  }

  function onChange(pagination, filters, sorter) {
    console.log('params', pagination, filters, sorter)
  }


  export default {
    name: 'SjRankedTab',
    data() {
      return {
        data,
        columns,
        pagination
      }
    },
    methods: {
      onChange
    }
  }
</script>